<template>
<div id="out9">
    <div id="top3">
		<a href="#/DingDan"><img id="imgTop1" src="../assets/img/duanhuowang/zuojiantou.png" alt=""/></a>
		<span>订单详情</span>
	</div>
	<div id="back"></div>
	<div class="haiGuan">
		根据海关要求，额额呃呃鹅鹅鹅鹅呃呃鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅
	</div>
	<a href="#/QuerenDingdan">
	<div class="addddd">
		<div>
			<div>
				<p class="tit"><span>李四</span>15012340708</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
			<span class="xiugai">修改地址</span>
		</div>
	</div>
	</a>
	<div class="adddddd">
		<div>
			<p class="tit">实名认证 <img src="../assets/img/gouwuche/yuanjiaojuxing-4.png" alt=""/><span>跷跷板小米盒子腹背受敌心满意足</span></p>
		    <p class="shiming">李四 <span>4107*************5</span></p>
		    <p class="bianji">
		        <span>
		        	    <img src="../assets/img/gouwuche/shanchu.png" alt=""/>
		            删除
		        </span>
		        <span>
		            <img src="../assets/img/gouwuche/bianji.png" alt=""/>
		            编辑
		        </span>
		    </p>
		</div>
	</div>
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
				
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
	a{
		color: black;
		text-decoration: none;
	}
	#out9{
		background: #f2f2f2;
	}
	#out9>#back{
		height: 9.6rem;
	}
	#out9 #top3 {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		display: flex;
		position: fixed;
		z-index: 10;
		align-items: center;
		justify-content: space-around;
	}
	#out9 #imgTop1 {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	#out9>#top3>span {
		text-align: center;
		padding-right: 8rem;
		box-sizing: border-box;
		width: 57.6rem;
		height: 3.6rem;
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		line-height: 3.6rem;
	}
	.haiGuan{
		height: 8rem;
		background: #666666;
		font-size: 2.4rem;
		color: white;
		padding: 1rem 2rem;
		line-height: 3rem;
		padding-right: 4rem;
		box-sizing: border-box;
		margin-bottom: 2rem;
	}
	.addddd{
		height: 18rem;
		background: url(../assets/img/gouwuche/langang.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.addddd>div{
		width: 100vw;
		height: 16rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
        background: white;
        padding-left: 2.5rem;
	}
	.addddd>div>.xiugai{
		width: 8rem;
		height: 8rem;
		border-radius: 50%;
		border: solid 0.1rem #cccccc;
		line-height: 2.6rem;
		box-sizing: border-box;
		padding: 1.3rem 1rem;
		font-size: 2.4rem;
		text-align: center;
	}
	.addddd>div>div{
		width: 47rem;
		height: 16rem;
		transform: translateX(-4rem);
	}
	.addddd>div>div>.tit{
		font-size: 2.8rem;
		color: #4d4d4d;
		padding-top: 2rem;
		padding-bottom: 3rem;
	}
	.addddd>div>div>.tit>span{
		padding-right: 7rem;
	}
	.addddd>div>div>p{
		font-size: 2.4rem;
		color: #808080;
		line-height: 3rem;
	}
	.addddd>div>img{
		width: 4.8rem;
		height: 4.8rem;
	}
	.addddd>div>span{
		font-size: 2.8rem;
		color: #808080;
		width: 59rem;
	}
	.adddddd{
		height: 18rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background: url(../assets/img/gouwuche/xingxing.png) no-repeat;
		background-size: 100% 100%;
		margin: 2rem 0;
		margin-bottom: 0;
	}
	.adddddd>div{
		width: 100vw;
		height: 16.5rem;
        background: white;
        padding-left: 2.5rem;
	}
	.adddddd>div>p{
		font-size: 2.4rem;
	}
	.adddddd>div>.tit{
		position: relative;
		font-size: 3rem;
		padding: 2rem 0;
	}
	.adddddd>div>.tit>span{
		font-size: 2.4rem;
		color: #e53e42;
		position: absolute;
		left: 15rem;
	}
	.adddddd>div>.tit>img{
		position: absolute;
		top: 1rem;
		width: 40rem;
		height: 4rem;
	}
	.adddddd>div>.shiming>span{
		padding-left: 8rem;
	}
	.adddddd>div>.bianji>span{
		float: right;
		margin-right: 4rem;
		margin-top: 3rem;
	}
	.adddddd>div>.bianji>span>img{
		width: 3rem;
		height: 3rem;
	}
</style>